import App from "../App"
import CopyApp from "../copyApp"
import couponApp from "../couponApp"
import SearchCommission from "../searchCommission"
import Vue from "vue"
import router from '../router'
import store from '../store'
import Foot from "../components/foot"
import LoginTip from "../components/loginTip"
import "../assets/css/global.css";
import "../assets/fonts/iconfont.css"
import VueClipboard from "vue-clipboard2"
import { Tabs, TabPane, Table, TableColumn, Image } from 'element-ui';
Vue.use(Tabs)
Vue.use(TabPane)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Image)
Vue.use(VueClipboard)
const footInstance = Vue.extend(Foot)
Vue.component("Foot", footInstance)
Vue.component("LoginTip", LoginTip)
Vue.config.productionTip = false


const summaryFirst = document.querySelector(".summary-first")
const J_goodsListElement = document.getElementById("J_goodsList")
//产品详情页
if (summaryFirst) {
    const element = document.createElement("div")
    element.id = "jttChromeExtensionApp"
    summaryFirst.after(element)

    new Vue({
        router,
        store,
        render: h => h(App)
    }).$mount("#jttChromeExtensionApp")

    //复制图片和图片链接
    const previewElement = document.getElementById("preview")
    const copyElement = document.createElement("div")
    copyElement.id = "copyContainer"
    previewElement.appendChild(copyElement)

    new Vue({
        render: h => h(CopyApp)
    }).$mount("#copyContainer")
}
//搜索页面
else if (J_goodsListElement) {
    let hasSearchProductSkus = []
    let timer
    function addCouponIntoSearchPage() {
        let productList = Array.from(document.querySelectorAll("#J_goodsList .gl-warp .gl-item[data-sku]"))
        let count = 0
        injectMatchedCoupon()
        var targetNode = document.querySelector("#J_goodsList .gl-warp");
        // 观察者的选项(要观察哪些突变)
        var config = { childList: true };
        // 当观察到突变时执行的回调函数
        var callback = function (mutationsList) {
            mutationsList.forEach(function (item, index) {
                if (item.type == 'childList') {
                    clearTimeout(timer)
                    count = 0
                    productList = Array.from(item.target.children)
                    injectMatchedCoupon()
                    let bottomElements = document.querySelectorAll("#J_bottomPage a")
                    if (bottomElements.length) {
                        let bottomElementsList = Array.from(bottomElements)
                        bottomElementsList.forEach(element => {
                            element.addEventListener("click", () => {
                                console.log("clicked")
                                if (timer) {
                                    clearTimeout(timer)
                                    timer = null
                                }
                                hasSearchProductSkus = []
                                setTimeout(() => {
                                    addCouponIntoSearchPage()
                                }, 2000)
                            })
                        })
                    }
                }
            });
        };
        // 创建一个链接到回调函数的观察者实例
        var observer = new MutationObserver(callback);
        // 开始观察已配置突变的目标节点
        observer.observe(targetNode, config);

        function injectMatchedCoupon() {
            let productElement = productList[count]
            if (hasSearchProductSkus.includes(productElement.dataset.sku)) {
                count++
                injectMatchedCoupon()
                return
            }
            timer = setTimeout(() => {
                chrome.runtime.sendMessage({
                    type: "custom_header_post",
                    url: "/api/goods/search",
                    baseURL: "https://union.jd.com",
                    data: {
                        page: 1,
                        data: {
                            key: productElement.dataset.sku
                        }
                    }
                }, function (result) {
                    hasSearchProductSkus.push(productElement.dataset.sku)
                    const commitElement = document.querySelector(`.gl-item[data-sku='${productElement.dataset.sku}'] .p-commit`)
                    //京东已登入
                    if (result.data) {
                        const { unionGoods } = result.data
                        if ( unionGoods[0][0].skuId == productElement.dataset.sku) {
                            console.log("京东已登入")
                            //优惠券存在
                            if(unionGoods[0][0].couponQuota && unionGoods[0][0].couponDiscount){
                                const couponElement = document.createElement("div")
                                productElement.appendChild(couponElement)
                                new Vue({
                                    render: h => h(couponApp, {
                                        props: {
                                            quota: unionGoods[0][0].couponQuota,
                                            discount: unionGoods[0][0].couponDiscount,
                                            couponUrl: unionGoods[0][0].couponLink
                                        }
                                    })
                                }).$mount(couponElement)
                            }
                            //佣金
                            const loginElement = document.createElement("div")
                            commitElement.before(loginElement)
                            new Vue({
                                render: h => h(SearchCommission, {
                                    props: {
                                        commissionInfo:unionGoods[0][0],
                                        isLogin: true
                                    }
                                })
                            }).$mount(loginElement)
                        }
                    }
                    //京东未登入
                    else {
                        const unLoginElement = document.createElement("div")
                        commitElement.before(unLoginElement)
                        new Vue({
                            render: h => h(SearchCommission, {
                                props: {
                                    isLogin: false
                                }
                            })
                        }).$mount(unLoginElement)
                    }
                    if (count < productList.length - 1) {
                        count++
                        injectMatchedCoupon()
                    }
                })
            }, 100)
        }
    }
    addCouponIntoSearchPage()
}
